<template>
	<view class="" style="padding-bottom: 150rpx;">
		<!-- 頭部 -->
		<u-modal :show="modalshow" title="營業時間" @confirm="modalshow=false" confirmText="確認" cancelText="取消">
			<view class="slot-content">
				<view class="" v-for="(item,index) in currentyylist" :key="index">
					<view class="color_ling textcenter text_g margin_right5 word_wrap">{{item}}</view>
				</view>
			</view>
		</u-modal>
		<view class="lbtposi">
			<u-swiper :list="swiperList" height="800rpx" keyName="image" indicator indicatorMode="dot" circular
				@click="goUrl"></u-swiper>
		</view>
		<view class="header paddinglr" :style="{paddingTop:systemBarHeight+'rpx'}"
			style="position: relative;z-index: 100;">
			<view class="flexbetween" @click="getlocation">
				<view class="flexleft">
					<image class="arrowImg margin_right2" src="/static/images/index/arrow_bottom.png" mode=""></image>
					<view class="color_ling text_g">{{currentAddress || ""}}</view>
				</view>
			</view>
			<view class="searchBox  flexbetween margin_top" @click="sousuo">
				<view class="flexleft" style="width: 100%;">
					<u-icon name="search" color="#B5B5B5" size="20"></u-icon>
					<view class="margin_left1" style="font-size: 24rpx;font-weight: 500;color: #B5B5B5;">請輸入搜索内容</view>
				</view>
				<view class="searchBtn">搜索</view>
			</view>
			<view class="">
				<u-tabs :list="tabList" @click="change" lineWidth="70rpx" lineColor="rgba(255, 209, 0, 1)"
					:activeStyle="{color: '#000000',fontWeight: 800,transform: 'scale(1.05)'}"
					:inactiveStyle="{color: '#666666',transform: 'scale(1)'}"></u-tabs>
			</view>
		</view>
		<swiper class="swiper" style="height: 400rpx;margin-top: 550rpx;">
			<swiper-item v-for="(item,index) in jgqList" :key="index">
				<view class="flexleft flex-wrap">
					<view class="cateItem margin_top4" style="min-width: 25%;" v-for="ite in jgqList[index]"
						:key="ite.id" @click="goGoodsList(ite)">
						<image class="cateImg" :src="ite.image" mode=""></image>
						<view class="color_san text_b margin_top2">{{ite.name}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 篩選 -->
		<u-sticky>
			<view class="screenBox margin_top flexbetween ffffff">
				<view :class="current==0?'color_ling text_a':'color_six text_a'" @click="selectabzh()">綜合</view>
				<view class="flexleft">
					<view :class="current==1?'color_ling text_a':'color_six text_a'" @click="selectab()">銷量</view>
					<view>
						<view :class="type==1?'arrow_top_active':'arrow_top'"></view>
						<view :class="type==2?'arrow_bottom_active':'arrow_bottom'"></view>
					</view>
				</view>
				<view class="flexleft">
					<view :class="current==2?'color_ling text_a':'color_six text_a'" @click="selectabprice()">評分</view>
					<view>
						<view :class="type==3?'arrow_top_active':'arrow_top'"></view>
						<view :class="type==4?'arrow_bottom_active':'arrow_bottom'"></view>
					</view>
				</view>
				<view class="flexleft">
					<view :class="current==3?'color_ling text_a':'color_six text_a'" @click="screenlalal()">距離</view>
					<view class="screen" style="margin-left: 5rpx;"></view>
				</view>
			</view>
		</u-sticky>
		<!-- 店鋪列表 -->
		<view class="" v-for="item in list.data" :key="item.id">
			<view class="" v-if="item.is_ad">
				<view class="margin_top1">
					<u-swiper :list="item.images_text" radius="0" keyName="image_text" circular
						@click="zdyclick(item.url)" height="250"></u-swiper>
				</view>
			</view>
			<view class="margin_top1 mainpadding ffffff boxshadow border12" v-else @click="goShopInfo(item.id,item)">
				<view class="flex">
					<!-- <image class="shopImg margin_right2" :src="item.logoimage" mode=""></image> -->
					<view class="flex1">
						<view class="flexbetween">
							<view class="color_ling text_g margin_right5 word_wrap" style="font-weight: bold;">
								{{item.name}}
							</view>
							<view class="flexleft">
								<image @click.stop="daohang(item.address)" class="shopPhone margin_right3"
									src="/static/images/index/navigation.png" mode="">
								</image>
								<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""
									@click.stop="phone(item.shopmbl)"></image>
							</view>
						</view>
						<view class="flexbetween margin_top1">
							<view class="">
								<view class="flexleft ">
									<view class="flexleft margin_right3">
										<image class="shopItemImg" src="/static/images/index/score.png" mode=""></image>
										<view class="text_pee color_theme">{{item.score || 0}}分</view>
									</view>
									<view class="flexleft margin_right3">
										<image class="shopItemImg" src="/static/images/index/sales.png" mode=""></image>
										<view class="text_pee color_six">月售{{item.sale}}</view>
									</view>
									<view class="tradeBox margin_right1" v-if="item.is_yes==1 && item.is_yes1==1">營業中</view>
									<view class="serviceBox margin_right1"
										v-if="item.is_yes==0 || (item.is_yes==1 && item.is_yes1==0)">休息中</view>
									<image class="shopItemImg" src="/static/images/index/distance.png" mode=""></image>
									<view class="text_pee color_six">
										{{returnKmUnit(Number(item.distance))}}
									</view>
								</view>
								<!-- qxpay_xxtype全支付，yypay_status悠悠付，icash_status icash支付,jkpay_status街口，linepay_status Linepay -->
								<view class="flexleft">
									<view class="paytypeBox margin_top1" style="background-color: #f4ce30;color: #000;" v-if="item.qxpay_xxtype">全支付</view>
									<view class="paytypeBox margin_top1" style="background-color: #1faeb0;color: #fff;" v-if="item.icash_status">icash</view>
									<view class="paytypeBox margin_top1" style="background-color: #f8f6bd;color: #000;" v-if="item.yypay_status">悠悠付</view>
									<view class="paytypeBox margin_top1" style="background-color: #d81419;color: #fff;" v-if="item.jkpay_status">街口支付</view>
									<view class="paytypeBox margin_top1" style="background-color: #2f993e;color: #fff;" v-if="item.linepay_status">Line pay</view>
								</view>
							</view>
							<view class="flexcolumn" style="min-width: 110rpx;width: 110rpx;" @click.stop="shareShop(item)">
								<image src="@/static/images/index/hongbao.png" style="width: 100rpx;height: 100rpx;"
									mode="">
								</image>
								<view class="text_pee" style="color:#f92828;">分享領現金</view>
							</view>
						</view>
						
						<view class="">
							<text class="text_a margin_top1 margin_right2" style="display: inline-block;"
								v-for="ite in item.yy_time_text" :key="ite">{{ite}}</text>
						</view>
						<view class="flexleft margin_top1">
							<view class="serviceBox margin_right2" v-if="item.is_call">呼叫服務</view>
							<view class="serviceBox margin_right2" v-if="item.is_pre">預約排隊</view>
							<view class="serviceBox margin_right2" v-if="item.is_ws">外送服務</view>
							<view class="couponBox margin_right2" v-if="item.is_hasrall">優惠券</view>
							<view class="text_a color_red" v-if="Number(item.deliveryfee)">{{item.deliveryfee || 0}}元免運
							</view>
						</view>
					</view>
				</view>
				<view class="scrollBox margin_top1">
					<scroll-view class="white_nowrap" scroll-x>
						<view class="flexleft" style="align-items: flex-start;">
							<!-- 不可超過多展示8個 -->
							<view class="margin_right1" v-for="value in item.goods" :key="value.id">

								<image class="goodsImg" :src="value.logoimage" mode="" v-if="value.logoimage"></image>
								<image class="goodsImg" src="../../static/images/index/noImg.jpg" mode="" v-else>
								</image>
								<view class="color_ling text_pee margin_top1"
									style="width: 164rpx;white-space: pre-wrap;">
									{{value.name}}
								</view>
								<view class="color_ling text_e margin_top1">
									<text style="font-size: 12rpx;">$</text>
									{{value.new_price}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<tabbar ref="tabbarref" :current="0"></tabbar>
		<view class="popzhezhao" v-if="zdypop">
			<view class="centerpop">
				<image src="@/static/images/index/closeimg.png" class="closepopimg" @click="zdypop=false" mode="">
				</image>
				<image :src="zdypopData.image_text" class="centerimg" mode="widthFix" @click="zdyclick(zdypopData.url)">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentAddress: "", //当前位置
				systemBarHeight: "",
				tabList: [],
				swiperList: [], //轮播圖
				jgqList: [], //金刚區
				current: 0,
				tabsid: "",
				type: 0, //綜合0，1銷量升，2銷量降，3評分升，4評分降
				page: 1,
				list: {
					data: []
				}, //商家列表
				chudi: false,
				name: "", //關键词
				lat: "",
				lng: "",
				ggList: [],
				currentyylist: [],
				jl: 0,
				modalshow: false,
				googleKey: "", //谷歌key
				zdypop: false,
				zdypopData: {}
			}
		},
		async onLoad() {
			uni.hideTabBar()
			this.systemBarHeight = getApp().globalData.systemBarHeight * 2 + 50
			this.getSwiperList()
			this.getCateList()
			this.getlocation()
			this.getShopList()
			this.getShowPop()
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.tabbarref.init()
			});
		},
		methods: {
			shareShop(item) {
				let that = this
				let url = "https://opos.tw/pages_index/shopInfogoogle?id="
				if (item.is_goole != 1) {
					url = "https://opos.tw/pages_index/shopInfo?id="
				}
				if (navigator.share) {
					navigator.share({
							title: item.fy_share_title,
							text: item.fy_share_title,
							url: url + item.id + '&invite_code=' + uni.getStorageSync(
								"invite_code"), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			getShowPop() {
				if (!this.http.checkIsLogin()) {
					return false
				}
				this.http.request('/api/index/getOnlyImage', 'GET', {
					data_type: 2
				}).then(res => {
					if (uni.getStorageSync('isshowindexpop')) return false
					this.zdypopData = res.data
					this.zdypop = true
					uni.setStorageSync('isshowindexpop', true)
				})
			},
			async getsystem() {
				let res = await this.http.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "gooleset",
					type: "google_key"
				})
				this.googleKey = res.data
			},
			getlocation() {
				let that = this
				navigator.geolocation.getCurrentPosition(function(position) {
					that.lat = position.coords.latitude
					that.lng = position.coords.longitude
					let postData = {
						latlng: position.coords.latitude + "," + position.coords.longitude,
						key: that.googleKey
					}
					that.getShopList()
					that.http.request('/api/index/getLocationInfo', 'GET', {
						latlng: postData.latlng,
					}).then(res => {
						that.currentAddress = res.data.results[0].formatted_address
						uni.setStorageSync("login_address", that.currentAddress)
						console.error(that.http.checkIsLogin(), that.currentAddress);
						if (that.http.checkIsLogin() && that.currentAddress) {
							that.setInfo(that.currentAddress)
						}
					})
				});
			},
			change(e) {
				if (e.name != "全部") {
					this.name = e.name
					this.goSearch()
				}
			},
			setInfo(login_address) { //存用户位置信息
				console.log("走接口》》》》");
				this.http.request('/api/member/userEdit', 'GET', {
					login_address
				}).then(res => {})
			},
			// getggList() { //獲取谷歌用戶信息
			// 	uni.request({
			// 		url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?keyword="+'酒吧' + "&latlng=" + this.lat + "," 
			// 		+ this.lng + "&radius=1500&key=AIzaSyC1F5VOcCXAOqxRZqYBMAP0eiPIZlG7vcc&language=zh-TW&pagetoken=33&type=restaura",
			// 		// url:"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=25.0338,121.5646&radius=1000&keyword=牛排&language=zh-TW&key=AIzaSyC1F5VOcCXAOqxRZqYBMAP0eiPIZlG7vcc",
			// 		data: {},
			// 		method: 'GET', //'GET','POST' 
			// 		dataType: 'json',
			// 		success: (res) => {
			// 			console.log(res, "google接口請求成功");
			// 		},
			// 		fail: (res) => {
			// 			console.log(res, "google接口請求失敗");
			// 		}
			// 	})

			// 	// this.http.request('/api/index/ggshopList', 'POST', {
			// 	// 	lon: this.lat,
			// 	// 	lat: this.lng
			// 	// }).then(res => {
			// 	// 	this.ggList = this.ggList.concat(res.data)
			// 	// })
			// },
			async getSwiperList() { //轮播圖
				let _this = this
				let res = await this.http.request('/api/index/getInimg', 'GET', {})
				if (res.code == 1) {
					res.data.img.forEach(item => {
						item.image = this.imgUrl + item.image
					})
					this.swiperList = res.data.img
					res.data.fenl.forEach(item => {
						item.image = this.imgUrl + item.image
					})
					this.jgqList = this.chuliemo(res.data.fenl, 8)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			chuliemo(arr, num) { //转化为50等分的點數组,(表情包使用)
				var newArr = []
				for (var i = 0; i < arr.length; i += num) {
					newArr.push(arr.slice(i, i + num))
				}
				return newArr
			},
			goUrl(e) {
				location.href = this.swiperList[e].url;
			},
			async getCateList() { //分類
				let _this = this
				let res = await this.http.request('/api/index/getShopsort', 'GET', {
					// page: page || 1,
					// limit: _this.limit,
				})
				if (res.code == 1) {
					_this.tabList = res.data
					_this.tabList.unshift({
						id: 0,
						name: "全部"
					})
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			scanbarCode() {
				let that = this
				uni.navigateTo({
					url: "/pages_index/scanpage"
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			getShopList(isPage, page) { //商家列表
				let _this = this
				if (!isPage) {
					this.list = {
						data: []
					}
				}
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				this.http.request('/api/index/getShoplist', 'POST', {
					name: "",
					sort: this.type,
					page: page || 1,
					classname: this.tabsid == "全部" ? "" : this.tabsid,
					jl: this.jl,
					lat: this.lat,
					lng: this.lng,
					data_type: 1
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						res.data.data.forEach(item => {
							item.logoimage = this.imgUrl + item.logoimage
							let week = new Date().getDay()
							let obj = {
								'1': "motime",
								'2': "tutime",
								'3': "wetime",
								'4': "thtime",
								'5': "frtime",
								'6': "satime",
								'7': "sutime",
							}
							this.$set(item, "time", item[obj[week]])
							if (item.goods) {
								item.goods.forEach(value => {
									if (value.logoimage) {
										value.logoimage = this.imgUrl + value.logoimage
									}
								})
							}
						})
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getShopList(true, page);
			},
			goGoodsList(value) { //商品列表
				location.href = value.url;
			},
			selectabzh() { //綜合
				this.current = 0
				this.type = 0
				this.jl = 0
				this.getShopList()

			},
			selectab() { //銷量
				this.current = 1
				this.type = this.type == 1 ? 2 : 1
				this.jl = 0
				this.getShopList()

			},
			selectabprice() { //價格
				this.current = 2
				this.type = this.type == 3 ? 4 : 3
				this.jl = 0
				this.getShopList()
			},
			screenlalal() { //距離
				if (this.current == 3 && this.jl == 1) {
					return false
				}
				this.current = 3
				this.jl = 1
				this.getShopList()
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			sousuo() {
				uni.navigateTo({
					url: "/pages/index/sousuojl?lat=" + this.lat + "&lng=" + this.lng
				})
			},
			goSearch() { //搜索
				let text = this.name
				this.name = ""
				uni.navigateTo({
					url: "/pages_index/search?name=" + text + "&lat=" + this.lat + "&lng=" + this.lng
				})
			},
			goShopInfo(id, item) { //店鋪詳情
				if (item.is_goole == 1) {
					uni.navigateTo({
						url: "/pages_index/shopInfogoogle?id=" + id
					})
					return false
				}
				uni.setStorageSync("shop_id", id)
				uni.navigateTo({
					url: "/pages_index/shopInfo?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paytypeBox {
		padding: 5rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
	}

	.popzhezhao {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
		z-index: 100000;
	}

	.centerpop {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.closepopimg {
		position: absolute;
		top: -95rpx;
		right: -30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.centerimg {
		width: 600rpx;
	}

	::v-deep.u-sticky {
		top: 0 !important;

	}

	.lbtposi {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	// 頭部
	.header {
		// height: 447rpx;
		// background-image: url('@/static/images/index/header.png');
		// background-size: 100% 100%;

		.arrowImg {
			width: 15rpx;
			height: 9rpx;
		}

		.scanImg {
			width: 42rpx;
			height: 42rpx;
		}
	}

	// 搜索框
	.searchBox {
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 5rpx 0 30rpx;
		position: relative;
		z-index: 100;

		.searchBtn {
			width: 124rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background: linear-gradient(312deg, #F8CF39 0%, #F8DA44 100%);
			border-radius: 65rpx 65rpx 65rpx 65rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	// tab栏
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	// 分類
	.cateImg {
		width: 106rpx;
		height: 106rpx;
	}

	.cateItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	// 篩選
	.screenBox {
		padding: 30rpx 70rpx;
	}

	// 店鋪
	.shopImg {
		width: 94rpx;
		min-width: 94rpx;
		height: 94rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.shopPhone {
		width: 60rpx;
		min-width: 60rpx;
		height: 60rpx;
	}

	.shopItemImg {
		width: 24rpx;
		min-width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.serviceBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(255, 141, 1, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8D01;
	}

	.yysjbox {
		padding: 5rpx;
		text-align: center;
		background: #e8f3ff;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1386fa;
	}

	.couponBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.tradeBox {
		padding: 5rpx;
		text-align: center;
		background: rgba(14, 181, 0, 0.1);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0EB500;
	}

	.scrollBox {
		// padding-left: 100rpx;

		.goodsImg {
			width: 204rpx;
			height: 204rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #b4b4b4;
		}
	}
</style>